<template>
	<view :class="tabBarClass" :style="tabBarStyle">
		<view class="main">
			<view class="left">
				<slot name="left">
					<view class="left-container" v-show="leftArrow && left">
						<uni-icons type="back" size="36rpx" :color="color || '#000'"></uni-icons>
					</view>
				</slot>
			</view>
			<view class="center">
				<slot>
					<view class="center-container">
						<text class="title">{{ title }}</text>
					</view>
				</slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "nav-bar",
		data() {
			return {
				left:false
			};
		},
		props: {
			title: String,
			background: String,
			color: String,
			position: Boolean,
			leftArrow:Boolean
		},
		computed: {
			tabBarStyle() {
				let {
					globalData: {
						statusBarHeight,
						osName
					}
				} = getApp();
				if(osName == 'ios'){
					console.log('=======111111==========')
					this.left = true;
				}else{
					this.left = false
				}
				let style = {
					paddingTop: `${statusBarHeight}px`
				};
				if (this.background) {
					style.background = this.background
				}
				if (this.color) {
					style.color = this.color
				}
				return style
			},
			tabBarClass() {
				return {
					"nav-bar": true,
					"component": true,
					"position": this.position
				}
			},
		},
		onLoad() {
			let {
				globalData: {
					osName
				}
			} = getApp();
			
		},
		methods: {
			triggerClickEvent(type) {
				if (type === "left") {
					uni.$emit("clickLeft");
					return;
				}
				if (type === "right") {
					uni.$emit("clickRight");
				}
			}
		}
	}
</script>

<style lang="scss">
	@import "@/common/style/flex.scss";

	$navBarBackgroundColor: #fff;
	$navBarHeight: 90rpx;
	$navBarTitleFontSize: 34rpx;
	$navBarTitleFontWeight: 500;

	.nav-bar {
		width: 100%;
		background-color: $navBarBackgroundColor;
		padding: 0 30rpx;
		color: #000;

		&.position {
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			background-color: transparent;
			z-index: 1000;
		}

		.main {
			height: 100%;
			height: $navBarHeight;
			position: relative;
			@include flex-r-between-start;

			.left {
				min-width: 120rpx;


				.left-container {
					height: 100%;
					@include flex-r-start-center;
				}
			}

			.center {
				min-width: 50%;
				height: 100%;
				text-align: center;
				position: absolute;
				top: 0;
				left: 50%;
				transform: translateX(-50%);

				.center-container {
					height: 100%;
					font-size: $navBarTitleFontSize;
					font-weight: $navBarTitleFontWeight;
					@include flex-r-center-center;
				}
			}

			.right {
				min-width: 120rpx;
			}
		}
	}
</style>
